<template>
    <div class="page">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <!-- <el-form-item label="球员代码">
                        <el-input v-model="searchForm.playerCode" placeholder="请输入球员代码" />
                    </el-form-item> -->
                    <el-form-item label="球员名称">
                        <el-input v-model="searchForm.playerName" placeholder="请输入球员名称" />
                    </el-form-item>
                    <el-form-item >
                        <el-button @click="doSearch">搜索</el-button>
                        <el-button type="primary" @click="doAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row v-loading="loading" >
            <el-col :span="24">
                <el-table :data="tableData">
                    <!-- <el-table-column prop="playerCode" align="center" label="球员代码" /> -->
                    <el-table-column prop="playerName" align="center" label="球员姓名"/>
                    <el-table-column align="center" label="性别">
                        <template #default="scope">
                            <span v-if="scope.row.sex === 'M'">男</span>
                            <span v-if="scope.row.sex === 'F'">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="birth" align="center" label="出生日期"/>
                    <el-table-column prop="playerCode" align="center" label="绑定码"/>
                    <el-table-column fixed="right" label="操作" align="center" width="120">
                        <template #default="scope">
                            <el-button type="primary" link @click="openDetail(scope.row)">详情</el-button>
                            <el-button type="primary" link @click="doEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="page-row">
                    <el-pagination background layout="prev, pager, next" :total="page.total" :current="page.current" :page-size="page.size" @change="changePage"/>
                </div>
            </el-col>
        </el-row>
        <PlayerEdit v-model:show="showEdit" :detail-data="detailData" @close="closeEdit"/>
        <PlayerDetail v-model:show="showDetail" :detail-data="detailData" @close="colseDetail"/>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { usePlayerStore } from '../../../store/player'
import PlayerEdit from './PlayerEdit.vue'
import PlayerDetail from './PlayerDetail.vue'

import { ElMessage } from 'element-plus'

const playerStore = usePlayerStore()
const searchForm = ref({
    playerCode: '',
    playerName: '',
});
const tableData = ref([])
const page = ref({
    current: 1,
    size: 10,
    total: 0
})
const loading = ref(true)
let searchData = {
    playerCode: '',
    playerName: ''
}
const showEdit = ref(false)
const detailData = ref<any>()
const showDetail = ref(false)
onMounted(() => {
    getList()
})
function doSearch() {
    searchData = {...searchForm.value}
    page.value.current = 1
    getList()
}
function changePage(current: number) {
    page.value.current = current
    getList()
}
function getList() {
    loading.value = true
    playerStore.getPlayerPage({
        current: page.value.current,
        size: page.value.size,
        // playerCode: searchData.playerCode,
        playerName: searchData.playerName
    }).then(res => {
        if (res.code === 't_200') {
            let obj = {...res.obj || {}}
            let list = obj.records
            tableData.value = list
            page.value = {
                current: obj.current,
                size: obj.size,
                total: obj.total
            }
        } else {
            ElMessage.error(res.msg)
        }
    }).catch(() => {
        ElMessage.error("请求失败")
    }).finally(() => {
        loading.value = false
    })
}
function doAdd() {
    detailData.value = {}
    showEdit.value = true
}
function doEdit(row:any) {
    detailData.value = {...row}
    showEdit.value = true
}
function closeEdit() {
    getList()
}
function openDetail(row: any) {
   showDetail.value = true
   detailData.value = row
}
function colseDetail() {
    showDetail.value = false
   detailData.value = {}
}
</script>
<style lang="scss" scoped>
.page{
    position: relative;
    .page-row{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }
}
</style>